<template>
	<div>
		<div class="bg-light">
			<div class="container-title">商品标签</div>
			<div class="pl pb">
				<CheckboxGroup @on-change="onChange" v-model="checkedArr">
          <Checkbox :label="item.productTagId" v-for="(item, index) in tagArr" :key="index" :disabled="isLook">{{ item.name }}</Checkbox>
        </CheckboxGroup>
      </div>
		</div>
		<div class="bg-light">
			<div class="container-title">设置</div>
			<div class="pl pb">
        <Checkbox v-model='isShelf' :disabled="isLook">上架</Checkbox>
      </div>
		</div>
	</div>
</template>
<script>
export default {
  props: {
    isLook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkedArr: [],
      tagArr: [],
      isShelf: true,
      productTagDTOs: [],
      backData:[] //编辑的时候，后台返回来的数据
    }
  },
  mounted() {
    this.getTagData();
  },
  methods: {
    getTagData() {
			this.$ajaxGet('/product/tag/product_center/all').then(data => {
        this.tagArr = (data || []).map(item => {
					return {
						productTagId: item.id,
            name: item.name,
            color: item.color
					}
				});
      });
    },
    onChange() {
      this.productTagDTOs = [];
      this.checkedArr.forEach(item =>{
        this.tagArr.forEach(m =>{
          if (item === m.productTagId) {
            let target = {};
            target.productTagId = item;
            target.tagDTO = {};
            target.tagDTO.color = m.color;
            target.tagDTO.name = m.name;
            this.productTagDTOs.push(target);
          }
        })
      })
      this.productTagDTOs.forEach(item =>{
        this.backData.forEach(m =>{
          if (item.productTagId === m.productTagId) {
            item.id = m.id;
            item.tagDTO.id = m.tagDTO.id;
          }
        })
      })
    }
  },
};
</script>